<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px auto;
        }

        div:hover {
            transform: rotate(45deg) scale(0.5);
            transition: 1s linear;
            box-shadow: 10px 5px 5px darkblue;
        }

        .randomColor {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
            margin-top: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <br>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <br>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <div class="box randomColor"></div>
    <script>
        var giveColor = document.getElementsByClassName('randomColor');
        var color = ['#578fff', '#8c9ffd', '#ff7ea2', '#ffbf43', '#74dde3', 'red','blue','#369','#983'];

        function randomColorOn(giveColor, color) { //参数1为获取的元素组，参数二为获取的颜色组
            var arr2 = [];
            for (var i = color.length; i > 0; i--) {
                const num = Math.floor(Math.random() * color.length); //获取随机数
                arr2.push(color[num]); //把随机数添加到数组中
                color.splice(num, 1); //删除原有数组的颜色
            }

            for (var j = 0; j < giveColor.length; j++) {
                giveColor[j].style.backgroundColor = arr2[j];
            }
        }
        randomColorOn(giveColor, color);
    </script>
</body>

</html>